。<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="start" name="start" />
    <input type="text" id="end" name="end" />
    <input
      type="button"
      id="btnSearch"
      name="btnSearch"
      value="价格区间查询"
    /><br />
    <input type="text" id="brandName" name="brandName" />
    <input type="button" id="btnBrand" name="btnBrand" value="名称查询" />
    <br />
    <table id="tb-data" width="300" border="1">
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      let data = [
        { id: 639262517, name: '华为Mate40', price: 5600 },
        { id: 731936361, name: '荣耀Mate30', price: 4500 },
        { id: 463493429, name: '荣耀笔记本15', price: 3899 },
      ]
      const tbody = document.querySelector('#tb-data tbody')
      function initData(myData) {
        tbody.innerHTML = ''
        for (let item of data) {
          let tr = document.createElement('tr')
          tr.innerHTML =
            '<td>' +
            item.id +
            '</td><td>' +
            item.name +
            '</td><td>' +
            item.price +
            '</td>'
          tbody.appendChild(tr)
        }
      }
      initData(data)

      const btnBrand = document.querySelector('#btnBrand')
      const txtBrand = document.querySelector('#brandName')
      btnBrand.addEventListener('click', function () {
        data.some(function (item) {
          if (data.name === txtBrand.value) {
            let newData = []
            newData.push(item)
            initData(newData)
            return true
          }
        })
      })

      const btnSearch = document.querySelector('#btnSearch')
      const start = document.querySelector('#start')
      const end = document.querySelector('#end')

      btnSearch.addEventListener('click', function () {
        //方法一
        /*  let newData = []
        data.forEach(function (item) {
          if (item.price >= start.value && item.price <= end.value) {
            newData.unshift(item)
          }
        })

        initData(newData) */

        let newData = data.filter(function (item) {
          return item.price >= start.value && item.price <= end.value
        })
        initData(newData)
      })
    </script>
  </body>
</html>
